import React from 'react';
import { inject, observer} from 'mobx-react';
import {Spin,Table,Button,Modal,Tooltip } from 'antd';
import { WeaNewScroll,WeaTab,WeaTools,WeaTop,WeaSearchGroup,WeaFormItem,WeaBrowser,WeaDateGroup,WeaInput,WeaSelect,WeaRightMenu,WeaDialog} from 'ecCom';
@observer
export default class AccessReport extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        showSearchAd :false,
        isrefesh:false,
        topTab:[],
        yearDatas:[],
        columns:[
          {title: '人员',dataIndex: 'username',width:'10%',
          render:(text, record, index) =><div title={text} className="noWrap">{text}</div>
          },
          {title: '分部',dataIndex: 'sub',width:'10%',
          render:(text, record, index) =><div title={text} className="noWrap">{text}</div>
          },
          {title: '部门',dataIndex: 'dept',width:'10%',
          render:(text, record, index) => <div title={text} className="noWrap">{text}</div>
          },
          {title: '1月',dataIndex: 'score', width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '2月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '3月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '4月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '5月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '6月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '7月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '6月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '8月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '9月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '10月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '11月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          },
          {title: '12月',dataIndex: 'score',width:'5%',
          render:(text, record, index) =><a title={text} className="noWrap" href="#">{text}</a>
          }
        ],
        datalist:[{"username":"杨文元","sub":"国力集团","dept":"总经办","score":"5"}],
        menu :[
        {
          key: '0',
          icon: <i className='icon-coms-search' />,
          content: '搜索',
          onClick: key => {},
        }
        ],
       
        _height:this.getHeight(),
        heightInit:false,
      }
    }
    componentWillMount() {//一些初始化请求
      let ydatas = [];
      for(let i=2013;i<2020;i++){
       ydatas.push({key: i,showname: i,selected: false});
      }
      this.setState({yearDatas:ydatas});
    }
    
    //重置查询条件
    resetSearchAd(){
      cancleSearchAd();
    }
    //搜索
    advanceSearch(){
      cancleSearchAd();
    }
    cancleSearchAd(){
      this.setState({
        showSearchAd:false
      });
    }
    getTabButtonsAd() {
      return [
          (<Button type="primary" onClick={()=>this.advanceSearch()}>搜索</Button>),
          (<Button type="ghost" onClick={()=>this.resetSearchAd()}>重置</Button>),
          (<Button type="ghost" onClick={()=>this.cancleSearchAd(false)}>取消</Button>)
      ]
    }
    showTotal(total){
      return `共 ${total} 条`;
    }
    showCurrentChange = (current) => {
      
    }
    onShowSizeChange =(current, pageSize)=>{
     
    }
    onSelectChange = (selectedRowKeys,selectedRows) => {
     
    }
    getHeight(header){
      let h = 0;
      if(header){
          h = header.clientHeight || 0;
      }
      return window.innerHeight-h;
    }
    render() {
      const{showSearchAd,columns,menu,_height,datalist,selectedRowKeys,topTab,yearDatas} = this.state;
      let header = document.getElementsByClassName("e9theme-layout-header")[0];
      if(header && !heightInit){
          this.setState({_height:this.getHeight(header),heightInit:true});
      }
      return (
        <div className="wea-workrelate-plan-auditlist" style={{height:_height}}>
        <WeaRightMenu datas={menu} showUrlItem={false} style={{height:'100%'}}>
            <WeaTop
              title={<div style={{display:"inline-block"}}><WeaSelect options={yearDatas} value={"2019"} viewAttr={2} style={{width:80,marginRight:10}}/>月度考核结果</div>}
              icon={<i className='icon-coms-ModelingEngine-o' />}
              iconBgcolor='rgb(150, 53, 138)'
              buttons = {[(<Button type='primary' onClick={()=>this.advanceSearch()}>搜索</Button>)]}
              showDropIcon={true}
              dropMenuDatas = {menu}
            />
              <WeaTab
                datas={topTab}
                searchType={["advanced","base"]}
                showSearchAd={showSearchAd}
                hideSearchAd = {()=>this.cancleSearchAd()}
                setShowSearchAd={bool => {
                  this.setState({
                    showSearchAd: bool
                  });
                }}
                buttonsAd={this.getTabButtonsAd()}
                // searchsAd={this.getSearchsAd()}
              />
              <Table columns={columns} bordered={true} scroll={{y: _height - 220}} dataSource={datalist} className ="wea-develop-antd-table"
               pagination={{
                  total: 1,
                  onChange: this.showCurrentChange,
                  showTotal:this.showTotal,
                  current:1,
                  showQuickJumper:true,
                  pageSize:10,
                  showSizeChanger:true, 
                  onShowSizeChange:this.onShowSizeChange
              }}/>
          </WeaRightMenu>
        </div>
    )
  }
};